<template>
	<view class="xybuilder-form">
		<xy-loading class="m-t-sm" v-if="formData.formItems.length == 0"></xy-loading>
		<template v-if="formData.formTabs.length > 0">
			<uni-segmented-control
				:current="current"
				:values="tabTitles"
				v-on:clickItem="onClickItem"
				:styleType="styleType"
				:activeColor="activeColor">
			</uni-segmented-control>
			<view class="content">
				<template v-for="(item1, key1) in formData.formTabs">
					<view v-show="current === key1" :key="key1">
						<view class="uni-common-mt">
							<view
								:key="key2"
								class="uni-form-item uni-column"
								v-for="(item2, key2) in item1.formItems">
								<view class="title">{{ item2.title }}</view>
								<xy-builder-form-item
									:item="item2"
									:formValues="formData.formValues[item1.name].tabValues">
								</xy-builder-form-item>
							</view>
						</view>
					</view>
				</template>
			</view>
		</template>
		<template v-else>
			<view class="xybuilder-form-block">
                <xy-builder-form-item
                    :item="item3"
                    :key="key3"
                    v-for="(item3, key3) in formData.formItems"
                    :formValues="formData.formValues">
                </xy-builder-form-item>
			</view>
		</template>
		<button type="primary" style="margin: 20px;background: #2d8cf0;" @click="submit">确认提交</button>
	</view>
</template>

<script>
	export default {
        name: 'xyBuilderForm',
		props: {
			api: '',
			cloudId: 0,
			eid: 0,
			show: false,
			predata: {},
            afterSubmit: ''
		},
		data() {
			return {
				loading: false,
				formData: {
					formMethod: 'get',
					formItems: [],
					formTabs: [],
					formValues: {}
				},
				current: 0,
				activeColor: '#2d8cf0',
				styleType: 'button',
				tabTitles: []
			}
		},
		created() {
			if (this.predata) {
                this.formData = this.predata;
                console.log(this.predata)
			} else {
				this.loadData();
			}
        },
        watch: {
            api(val) {
                this.loadData();
            },
            show(val) {
                if (val == true) {
                    this.loadData();
                }
            }
        },
		methods: {
			async loadData(){
				let res = await this.util.request({
					url: this.api,
					method: 'get',
				});
				// console.log(res)
				if (res.code == 200) {
					this.formData = res.data.formData
					for (var i = 0; i < this.formData.formTabs.length; i++) {
						this.tabTitles[i] = this.formData.formTabs[i].title
					}
				} else{
					this.util.showToast({
						title: res.msg,
						icon: 'loading',
						duration: 3000
					});
				}
			},
			async submit() {
                // 提交数据
                this.loading = true;
				let res = await this.util.request({
					url: this.api,
					method: this.formData.formMethod,
					data: this.formData.formValues
				});
				if (res.code == '200') {
					this.util.showToast({'title': res.msg});
				} else {
					this.util.showToast({'title': res.msg});
                }
                this.$emit('afterSubmit', res);
				this.loading = false;
			},
			onClickItem(index) {
				if (this.current !== index) {
					this.current = index;
				}
			},
		}
	}
</script>

<style lang="scss">
    .xybuilder-form-block {
        margin: 0px 0px;
    }
</style>
